<template>
  <div class="container pd50">
    <!-- <form action="/">
            <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                show-action
                @search="onSearch"
                @cancel="onCancel"
            />
        </form> -->
    <nav-bar></nav-bar>
    <van-swipe :autoplay="3000" indicator-color="white" class="home-swiper">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="'https://mall-bucket-2.oss-cn-'+item.imgUrl" @click="onDetailClick(item.id)" :alt="item.id" />
      </van-swipe-item>
    </van-swipe>
    <div class="main">
      <!-- <div class="section-header common-h2"><span class="common-h2-title">商品列表</span></div> -->
      <van-tabs v-model="active">
        <van-tab title="列车餐厅">
          <div class="food-list">
            <div class="food-item" @click="onDetailClick(item.id)" v-for="item in trainList" :key="item.id">
              <img class="list-item-img" :src="item.coverUrl" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd">
                <span class="ui-c-red">￥{{item.sellPrice}}</span>&nbsp;&nbsp;&nbsp;
                <span style="font-size:13px">已售 {{item.salesVolume}} 份</span>
              </div>
            </div>
            <div class="food-item-virtual" v-for="(item, index) in (trainList.length%2)" :key="index">
            </div>
          </div>
        </van-tab>
        <van-tab title="站点餐厅">
           <div class="food-list">
            <div class="food-item" @click="onDetailClick(item.id)" v-for="item in siteList" :key="item.id">
              <div class="sign" v-if="item.siteName">{{item.siteName}}站</div>
              <img class="list-item-img" :src="item.coverUrl" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd">
                <span class="ui-c-red">￥{{item.sellPrice}}</span>&nbsp;&nbsp;&nbsp;
                <span style="font-size:13px">已售 {{item.salesVolume}} 份</span>
              </div>
            </div>
            <div class="food-item-virtual" v-for="(item, index) in (siteList.length%2)" :key="index">
            </div>
          </div>
        </van-tab>
        <van-tab title="本地餐厅">
          <div class="food-list">
            <div class="food-item" @click="onDetailClick(item.id)" v-for="item in localList" :key="item.id">
              <div class="sign" v-if="item.siteName">{{item.siteName}}站</div>
              <img class="list-item-img" :src="item.coverUrl" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd">
                <span class="ui-c-red">￥{{item.sellPrice}}</span>&nbsp;&nbsp;&nbsp;
                <span style="font-size:13px">已售 {{item.salesVolume}} 份</span>
              </div>
            </div>
            <div class="food-item-virtual" v-for="(item, index) in (localList.length%2)" :key="index">
            </div>
          </div>
        </van-tab>
        <van-tab title="猜你喜欢">
          <div class="food-list">
            <div class="food-item" @click="onDetailClick(item.id)" v-for="item in likeList" :key="item.id">
              <div class="sign" v-if="item.siteName">{{item.siteName}}站</div>
              <img class="list-item-img" :src="item.coverUrl" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd">
                <span class="ui-c-red">￥{{item.sellPrice}}</span>&nbsp;&nbsp;&nbsp;
                <span style="font-size:13px">已售 {{item.salesVolume}} 份</span>
              </div>
            </div>
            <div class="food-item-virtual" v-for="(item, index) in (likeList.length%2)" :key="index">
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div class="list">
        <van-row>
          <van-col span="12" v-for="item in goodsList" :key="item.id">
            <div class="list-item" @click="onDetailClick(item.id)">
              <img class="list-item-img" :src="item.coverUrl" :alt="item.goodsName">
              <div class="list-item-hd van-ellipsis">{{item.goodsName}}</div>
              <div class="list-item-bd">
                <span class="ui-c-red">￥{{item.sellPrice}}</span>&nbsp;&nbsp;&nbsp;
                <span style="font-size:13px">已售 {{item.salesVolume}} 份</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import NavBar from '../../components/navBar/index'
export default {
  data() {
    return {
      active: 0,
      images: [],
      value: '',
      banner: [],
      selectValue: '', // 选中的值
      sideNavList: [], // 首页分类列表
      goodsList: [],
      goodsMap: {},
      pageQuery: {
        trainName: '',
        pageNum: 1,
        pageSize: -1
      },
      trainList: [],
      siteList: [],
      localList: [],
      likeList: []
    }
  },
  components: {
    NavBar
  },
  created() {
    this.getBannerList()
    // this.getVarity()
    this.getTrainList()
    this.getSiteList()
    this.getLocalList()
    this.getLikeList()
  },
  computed: {
    ...mapState(['train'])
  },
  methods: {
    onSearch() { },
    onCancel() { },
    /**
     * 高铁list
     */
    getTrainList() {
      this.pageQuery.trainName = this.train.trainName
      this.$api.home.getTrainFood(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.trainList = res.data.records
        }
      })
    },
    getSiteList() {
      this.$api.home.getSiteFood(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.siteList = res.data.records
        }
      })
    },
    getLocalList() {
      this.$api.home.getLocalFood(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.localList = res.data.records
        }
      })
    },
    /**
     * 猜你喜欢 推荐列表
     */
    getLikeList () {
      const query = {
        trainSplitSn: this.train.trainSplitSn | 1,
        ...this.pageQuery
      }
      this.$api.home.getLikeFood(query).then(res => {
        if (res.code === 200) {
          this.likeList = res.data.records
        }
      })
    },
    /**
     * 获取顶部banner列表
     */
    getBannerList() {
      this.$api.home.getHomeSwiper(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.banner = res.data.records
        }
      })
    },
    getVarity() {
      this.$api.shop.getVarityList().then(res => {
        if (res.code === 200) {
          this.sideNavList = res.data.map(item => {
            return {
              text: item.typeName,
              value: item.id
            }
          })
          this.selectValue = res.data[0].id
          this.overItem(res.data[0].id)
        }
      })
    },
    overItem(item) {
      const query = {
        typeId: item
      }
      this.$api.shop.getGoodsByVarity(query).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
        }
      })
    },
    /**
     * 获取货品列表
     */
    getGoodsList() {
      this.$api.shop.getAllGoods().then(res => {
        if (res.code === 200) {
          this.goodsList = res.data.records
        }
      })
    },
    onDetailClick(id) {
      this.$router.push({ path: `/goods-detail/${id}` })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  padding-top: 54px;
  .main {
    margin-top: 20px;
    .food-list{
      width: 100%;
      padding: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-evenly;
      box-sizing: border-box;
      .food-item {
        flex: 0 1 45%;
        margin-bottom: 10px;
        text-align: center;
        background-color: #fff;
        padding: 5px;
        border-radius: 10px;
        position: relative;
        .sign {
          position: absolute;
          width: 50px;
          height: 20px;
          line-height: 20px;
          font-weight: bolder;
          left: 5px;
          top: 5px;
          background-color: lightgray;
          opacity: .5;
          text-align: center;
        }
        .list-item-img{
          width: 100%;
          height: 100px;
        }
        .list-item-hd{

        }
        .list-item-bd{
          color: lightcoral;
        }
      }
      .food-item-virtual{
        flex: 0 1 45%;
        margin-bottom: 10px;
      }
    }
  }
}
.home-swiper,.home-swiper img {
  width: 100%;
  height: 200px;
}
.common-h2 {
  background: none;
}
</style>
